<template>
  <div class="md:flex">
    <Col span="5" style="margin-left: 93%" class="md:my-5">
      <Button v-per="'cceAdd'" style="background-color: cornflowerblue; color: white" @click="handleCreate"
        >新增告警规则</Button
      >
    </Col>
  </div>

  <Table
    ref="tableRef"
    size="large"
    :columns="cceRuleColumns"
    :data-source="dataSource"
    :pagination="pagination"
    @change="handleTableChange"
    bordered
    class="main-table"
    :loading="loading"
    :scroll="scroll"
    sticky
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'action'">
        <span class="flex justify-center">
          <span v-per="'cceUpdate'">
            <a class="font-bold" @click="handleEdit(record)">编辑</a>
          </span>
          <Divider type="vertical" />
          <span v-per="'cceDetail'">
            <a class="font-bold" @click="handleView(record)">详情</a>
          </span>
          <Divider type="vertical" />
          <span v-per="'cceDelete'">
            <a class="font-bold" @click="handleDelete(record)">删除</a>
          </span>
          <Divider type="vertical" />
        </span>
      </template>
    </template>
  </Table>
  <CceRuleDrawer ref="cceRuleDrawerRef" @success="handlerSearch"></CceRuleDrawer>
  <CceRuleDetail ref="cceDetailDrawerRef"></CceRuleDetail>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { Divider, Table, TableProps, Button, Col } from 'ant-design-vue';
import { deleteCceAlertRule, getCceRuleList } from '/@/api/maintenance-center/alarm/alarm';
import CceRuleDrawer from './cceRuleDrawer.vue';
import CceRuleDetail from '/@/views/maintenance-center/alarm-rule/new-cce-rule/components/cceRuleDetail.vue';

const scroll = ref<undefined | object>(undefined);
const loading = ref(true);
const cceRuleDrawerRef = ref();
const cceDetailDrawerRef = ref();
const tableRef = ref();
const type = ref();
const cceRuleColumns = [
  {
    title: '告警规则名称',
    dataIndex: 'alarmRuleName',
    width: 200,
  },
  {
    title: '状态',
    dataIndex: 'stateValue',
    width: 150,
  },
  {
    title: '资源类型',
    dataIndex: 'namespace',
    width: 150,
  },
  {
    title: '阈值条件',
    dataIndex: 'threshold',
    width: 150,
  },
  {
    title: '指标名称',
    dataIndex: 'metricName',
    width: 150,
  },
  {
    title: '统计方式',
    dataIndex: 'statistic',
    width: 150,
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 150,
  },
];

const dataSource = ref([]);
let current = ref(1);
let size = ref('10');
const total = ref('0');
const pagination = computed(() => ({
  showSizeChanger: true,

  total: total.value,
  current: current.value,
  size: size.value,
  showTotal: (total) => {
    return `共 ${total} 条`;
  },
}));
onMounted(() => {
  try {
    getCceRuleList({
      ...{
        current: current.value,
        size: size.value,
      },
    }).then((res) => {
      dataSource.value = res;
      total.value = res.length;
    });
  } finally {
    loading.value = false;
  }
});

const handlerSearch = () => {
  getCceRuleList({
    ...{
      current: current.value,
      size: size.value,
    },
  }).then((res) => {
    dataSource.value = res;
    total.value = res.length;
  });
};

const handleTableChange: TableProps['onChange'] = (pag) => {
  current.value = pag.current;
  size.value = pag.pageSize;
  if (Number(size) > 10) {
    scroll.value = { x: 'max-content', y: 500 };
  }
  getCceRuleList({
    ...{
      current: current.value,
      size: size.value,
    },
  }).then((res) => {
    dataSource.value = res;
    total.value = res.length;
    current.value = pag.current;
    size.value = pag.pageSize;
  });
};

function handleCreate() {
  type.value = 'create';
  cceRuleDrawerRef.value.showDrawer(null, type.value);
}

function handleEdit(record: Recordable) {
  type.value = 'edit';
  cceRuleDrawerRef.value.showDrawer(record, type.value);
}

function handleView(record: Recordable) {
  cceDetailDrawerRef.value.showDrawer(record);
}

async function handleDelete(record: Recordable) {
  await deleteCceAlertRule({ alarmRuleId: record.alarmRuleId });
  handlerSearch();
}
</script>

<style lang="less" scoped>
/* 表格斑马样式 **/
/deep/ .ant-table-tbody tr:nth-child(2n) {
  background-color: #f8f8f8;
}

/deep/ .ant-table-thead > tr > th {
  text-align: center;
  background-color: #f5f5f5;
  color: #959595;
  font-weight: bold;
}

/deep/ .ant-table-tbody {
  text-align: center;
}

/deep/ .ant-table-tbody > tr > td {
  padding: 10px;
}

/deep/ .ant-table-thead > tr > th {
  padding: 25px;
}
</style>
